<template>
  <div class="app-container specification">
    <div class="specification-header">
      <el-button type="primary" size="mini" @click="dialog.createSpecification = true">新增规格</el-button>
    </div>
    <el-table
      :data="list"
      style="width: 100%">
      <el-table-column
        label="规格名称">
        <template slot-scope="scope">
          <div class="table-link">
            <span>{{ scope.row.sku_name }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="GPU类型">
        <template slot-scope="scope">
          <div class="table-link">
            <span>{{ scope.row.gpu_type }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="GPU数量">
        <template slot-scope="scope">
          <div class="table-link">
            <span>{{ scope.row.gpu_count }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="CPU核数">
        <template slot-scope="scope">
          <div class="table-link">
            <span>{{ scope.row.cpu_vcore }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="内存（GB）">
        <template slot-scope="scope">
          <div class="table-link">
            <span>{{ scope.row.mem }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="操作系统">
        <template slot-scope="scope">
          <div class="table-link">
            <span>{{ scope.row.os }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="size"
        label="操作"
        width="80">
        <template slot-scope="scope">
          <a class="table-action" @click="clickModifySpecification(scope.row)">修改</a>
          <a class="table-action" @click="clickDeleteSpecification(scope.row)">删除</a>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :visible.sync="dialog.createSpecification"
      :title="dialog.editSpecification ? '修改规格' : '新增规格'"
      width="500px"
      @close="resetForm('createSpecificationForm')">
      <el-form ref="createSpecificationForm" :model="createSpecificationForm" :rules="rulesCreateSpecification" label-width="120px">
        <el-form-item label="规格名称：" prop="skuName">
          <el-input v-model="createSpecificationForm.skuName" />
        </el-form-item>
        <el-form-item label="GPU类型：" prop="gpuType">
          <el-input v-model="createSpecificationForm.gpuType" />
        </el-form-item>
        <el-form-item label="GPU数量：" prop="gpuCount">
          <el-input v-model="createSpecificationForm.gpuCount" />
        </el-form-item>
        <el-form-item label="CPU核数：" prop="cpuVcores">
          <el-input v-model="createSpecificationForm.cpuVcores" />
        </el-form-item>
        <el-form-item label="内存：" prop="memory">
          <el-input v-model="createSpecificationForm.memory" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialog.createSpecification = false; dialog.editSpecification = false;">取 消</el-button>
        <el-button size="small" type="primary" @click="submitForm('createSpecificationForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { handleMachineSpecification } from '@/api/machine'

export default {
  data() {
    return {
      list: null,
      listLoading: true,
      selCluster: '',
      clusterOptions: [],
      // 总页数
      totalPage: 0,
      // 每页条数
      pageSize: 20,
      // 当前页
      pageNumber: 1,
      dialog: {
        createSpecification: false,
        editSpecification: false
      },
      createSpecificationForm: {
        skuName: '',
        gpuType: '',
        gpuCount: '',
        cpuVcores: '',
        memory: ''
      },
      rulesCreateSpecification: {
        skuName: [
          { required: true, message: '请输入规格名称', trigger: 'blur' }
        ],
        cpuVcores: [
          { required: true, message: '请输入CPU核数', trigger: 'blur' }
        ],
        memory: [
          { required: true, message: '请输入内存', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this._handleMachineSpecification('Get')
  },
  methods: {
    // 点击table名称
    toDetail(row) {
      this.$store.dispatch('SaveCurCLuster', row)
      this.$router.push({ path: '/cluster/nodes' })
    },
    // 停止任务
    stopTask(row) {
      this.$confirm('此操作将停止该任务, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this._taskOperation(this.selCluster, row.name)
      })
    },
    // 修改用户
    clickModifySpecification(row) {
      this.dialog.createSpecification = true
      this.dialog.editSpecification = true
      this.createSpecificationForm.skuName = row.sku_name
      this.createSpecificationForm.gpuType = row.gpu_type
      this.createSpecificationForm.gpuCount = row.gpu_count
      this.createSpecificationForm.cpuVcores = row.cpu_vcore
      this.createSpecificationForm.memory = row.mem
    },
    // 删除用户
    clickDeleteSpecification(row) {
      this.$confirm(`此操作将删除规格${row.sku_name}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = {
          sku_name: row.sku_name
        }
        this._handleMachineSpecification('Delete', data)
      })
    },
    // 表单提交(createSpecificationForm: 新增规格)
    submitForm() {
      const method = this.dialog.editSpecification ? 'Put' : 'Post'
      this.$refs['createSpecificationForm'].validate((valid) => {
        if (valid) {
          const data = {
            sku_name: this.createSpecificationForm.skuName,
            cpu_vcores: this.createSpecificationForm.cpuVcores,
            gpu_type: this.createSpecificationForm.gpuType,
            gpu_count: this.createSpecificationForm.gpuCount,
            memory: this.createSpecificationForm.memory
          }
          this._handleMachineSpecification(method, data)
          this.resetForm('createSpecificationForm')
        } else {
          return false
        }
      })
    },
    // 重置表单
    resetForm(formName) {
      this.dialog.editSpecification = false
      this.dialog.createSpecification = false
      this.createUserForm = {
        skuName: '',
        gpuType: '',
        gpuCount: '',
        cpuVcores: '',
        memory: ''
      }
      this.$refs[formName].resetFields()
    },
    // 机器规格操作（查询列表：Get,新增：Post,修改：Put,删除：Delete）
    _handleMachineSpecification(method, data) {
      this.listLoading = true
      handleMachineSpecification(method, data).then(res => {
        this.listLoading = false
        if (res.message.code === 0) {
          switch (method) {
            case 'Get':
              this.list = res.data
              break
            case 'Post':
              this.$message({ message: '新建成功', showClose: true, type: 'success' })
              this._handleMachineSpecification('Get')
              break
            case 'Put':
              this.$message({ message: '修改成功', showClose: true, type: 'success' })
              this._handleMachineSpecification('Get')
              break
            case 'Delete':
              this.$message({ message: '删除成功', showClose: true, type: 'success' })
              this._handleMachineSpecification('Get')
              break
          }
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.specification {
  &-header {
    padding: 10px;
    background: #ffffff;
    font-size: 14px;
    color: #303133;
    font-weight: bold;
    .header-title {
      font-size: 14px;
      font-weight: 700;
    }
  }
  label {
    font-weight: normal
  }
  .table-action {
    color: #4285f4;
  }
  .table-link {
    &:hover {
      color: #4285f4;
    }
  }
}
</style>
